<template>
    <div class='top-nav'>
        <a :href='titleHref' class='title'>{{title}}</a>
        <slot name="tab"></slot>
        <span class="more"><a :href="moreHref" class="s-fc3">更多</a><i class="cor">&nbsp;</i></span>
    </div>
</template>
<script>
    export default {
        name: 'topNav',

        props: {
            title: {
                type: String,
                default: '标题'
            },
            titleHref: {
                type: String,
                default: 'javascript:;'
            },
            moreHref: {
                type: String,
                default: 'javascript:;'
            }
        }
    }
</script>
<style lang="scss" scoped >
    $guide-dot: url(../../assets/images/index.png) no-repeat;

    .top-nav {
        height: 33px;
        padding: 0 10px 0 34px;
        border-bottom: 2px solid #C10D0C;
        background: $guide-dot;
        background-position: -225px -156px;
        
        .title {
            float: left;
            font-size: 20px;
            font-weight: normal;
            line-height: 28px;
            color: #333;
        }

        .tab {
            float: left;
            margin: 7px 0 0 20px;

            a {
                width: 200px;
                padding: 0 10px;
                border-right: 1px solid #ccc;
                color: #666;
            }
        }

        .more {
            float: right;
            margin-top: 9px;

            a{
                color: #666;
            }

            .cor{
                display: inline-block;
                width: 12px;
                height: 12px;
                margin-left: 4px;
                vertical-align: middle;
                background: $guide-dot;
                background-position: 0 -240px;
            }
        }
    }
    
</style>